<?php session_start(); ?>
<html>
<head>
	<meta name="viewport" content="width=400px, initial-scale=.7, minimum-scale=.7"/>
	<link rel="stylesheet" type="text/css" href="WW.css" />
	<title>WordWaffle</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript">
		
		function checkForSessKey()
		{
			return decodeURI((RegExp('sesskey=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]);
		}
		
		function refreshScreen()
		{
			var myKey = $("#start").attr("name");
			var gameID = $("#signIn").attr("name");
			
			$("#playerList").load('getPlayerList.php?sesskey=' + myKey);
			$.get("getGameState.php?gameID=" + gameID,function(gameState){
				if (gameState == 0)
					{ $("#playerStatus").load('getGameStatus.php?sesskey=' + myKey); }
				if (gameState == 1)
				{
					$("#start").hide();
					$("#playerStatus").text('');

					$.ajax({
						url: 'player.php?sesskey=' + myKey
							+ "&gameID=" + $("#signIn").attr("name"),
						success: function(whoseTurn){
							if (isNaN(whoseTurn))
							{
								$("#letters").hide();
								$("#errorMsg").text(whoseTurn);
							}
							else
							{	
								if (whoseTurn == 1)
								{	//my turn
									$("#letters").show();
									$("#errorMsg").text('');
								}
								if (whoseTurn == 2)
								{	//game ended prematurely
									$("#errorMsg").text("A player left before the game finished.");
								}
							}
						}
					});
				}
				if (gameState == 3) //game is over
				{
					var url = "showScores.php?sesskey=" + myKey
						+ "&gameID=" + gameID;
					$(location).attr('href',url);
				}
				if (gameState == 4) //game finished prematurely
				{
					var url = "index.php?sesskey=" + myKey;
					$(location).attr('href',url);
				}
			});
		}
		
		$(document).ready(function(){
			//check for sesskey (reactivate player for next game)
			var myKey = checkForSessKey();
			if (myKey != "null")
			{	//attempt to reactivate
				$.ajax({
					url: "renew.php?sesskey=" + myKey,
					success: function(results){
						if (results != "0")
						{
							$("#signIn").attr("name",results); //gameID
							$("#start").attr("name",myKey);
							$("#start").show();
							$("#signIn").hide();
						}
					}
				});
			}
			else{ myKey = $("#start").attr("name"); }
			refreshScreen();
			
			$("#join").click(function(){
				if ($("#name").val() == "") { $("#errorMsg").text("Please enter a name"); }
				else if ($("#password").val() == "") { $("#errorMsg").text("Please enter a password, even if you've never played before."); }
				else
				{
					$.ajax({		
						url: "canIPlay.php?name=" + $("#name").val()
							+ "&password=" + $("#password").val()
							+ "&firsttime=" + $("#firstTime").attr('checked')
							+ "&sesskey=" + myKey,
						success: function(results){
							if (isNaN(results)) { $("#errorMsg").text(results); }
							else
							{
								//successful join
								$("#errorMsg").text('');								
								$("#signIn").hide();
								$("#signIn").attr("name",results);
								$("#start").show();
								refreshScreen();
							}
						}
					});
				}
			});
			
			$("#start").click(function(){
				var gameID = $("#signIn").attr("name");
				$.ajax({
					url: "startGame.php?sesskey=" + myKey
						+ "&gameID=" + gameID,
					success: function(results){
						if (isNaN(results)) { $("#errorMsg").text(results); }
						else { refreshScreen(); }
					}
				});
				refreshScreen();
			});
			
			$(".letter").click(function(){
				$.ajax({		
					url: "chooseLetter.php?letter=" + $(this).text()
						+ "&sesskey=" + myKey
						+ "&gameID=" + $("#signIn").attr("name"),
					success: function(results){
						if (isNaN(results)) { $("#errorMsg").text(results); }
						else { refreshScreen(); }
					}
				});
			});
			
			$(".cell").click(function(){
				var cell = $(this).attr("id");
				$.ajax({		
					url: "placeLetter.php?cell=" + cell
						+ "&sesskey=" + myKey
						+ "&gameID=" + $("#signIn").attr("name"),
					success: function(results){
						if (results.length > 1) { $("#errorMsg").text(results); }
						else
						{
							
							$("#" + cell).text(results).animate({ backgroundColor: "#c1310e" }, 1000);
							$("#errorMsg").text('');
							refreshScreen();
						}
					}
				});
			});
			
			$("#reset").click(function(){
				$.ajax({ 
					url: "reset.php",
					success: function(results){
						window.location="index.php";
					}
				});
			});
		});
		//auto-refresh every 5 seconds
		var refreshId = setInterval(refreshScreen,5000);
		$.ajaxSetup({ cache: false });		
	</script>
</head>
<body>
<center>
<div id="container">
	<div id="banner">
		<!--BANNER-->
		<img src="img/waffleW.png" alt="W" style="float:left" />ord Waffle
	</div>
	<div id="top">
		<div id="players">
			<div id="playerStatus"></div>
			<div id="playerList"></div>
			<button id="start" style="display:none;height:50px" name="<?php echo rand(); ?>">Start game with these players</button>
		</div>
		<div id="player">
			<div id="signIn" name="0">
				<div style="float:left">Name:<input type="text" id="name" style="width:120px" /></div>
				<div style="float:right">Password:<input type="password" id="password" style="width:120px" /></div>
				<div style="clear:both;height:3px"></div>
				<div style="float:left;margin-top:10px"><input type="checkbox" id="firstTime" />This is my first time<br /></div>
				<div style="float:right"><button id="join" style="height:40px;width:150px">Join Game</button></div>
				<div style="clear:both"></div>
			</div>
			<div id="letters" style="display:none">
			Your turn to choose a letter!<br />
			<?php
				$l = "";
				for($i=65;$i<65+26;$i++)
				{
					if ($i != 65) $l .= " - ";
					$l .= "<a class='letter'>" . chr($i) . "</a>";
				}
				echo $l;
			?>
			</div>
			<div style="clear:both"></div>
			<div id="errorMsg"></div>
		</div>
	</div>
	<div style="clear:both" />
	<div class="waffle">
	<?php
		for ($i=1;$i<=5;$i++)
		{
			for ($j=1;$j<=5;$j++)
			{
				echo "<div class='cell' id='$i$j'></div>";
			}
			echo "<div style='clear:both'></div>";
		}
	?>
	</div>
</div>
</center>
<button id="reset">reset</button>
</body>
</html>